<template>
    <div class="index-pages">

        <div class="index-header">
            <a class="user iconfont icon-gerenzhongxin" @click="toUser"></a>
            <img class="slogan" src="../assets/images/slogan8.png" alt="真房源">
            <router-link class="city" :to="{path:'/cityList',query:{redirect:''}}">{{ selectedCity }}</router-link>
        </div>

        <div class="index-menu">
            <ul class="clearfix">
                <li>
                    <router-link to="/houseList/0">
                        <img src="../assets/images/icon2.png" alt="">
                        <p>租厂房</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/houseList/1">
                        <img src="../assets/images/icon3.png" alt="">
                        <p>买厂房</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/landList">
                        <img src="../assets/images/icon5.png" alt="">
                        <p>买土地</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/buildList">
                        <img src="../assets/images/icon6.png" alt="">
                        <p>写字楼</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/parkList">
                        <img src="../assets/images/icon7.png" alt="">
                        <p>找园区</p>
                    </router-link>
                </li>
                <li>
                    <router-link to="/data">
                        <img src="../assets/images/icon4.png" alt="">
                        <p>供需大数据</p>
                    </router-link>
                </li>
            </ul>
        </div>

        <div class="index-panel">
            <div class="hd"><i></i><span>为你推荐厂房</span></div>
            <div class="index-remlist">
                <router-link :to="{name:'detail',params:{id:item.id}}" class="items" v-for="(item, index) in remList" :key="index" v-if="index < 9">
                    <div class="pic-box"><img :src="item.logo">
                        <i v-if="item.type === 0"><img src="../assets/images/icon9.png"></i>
                        <i v-if="item.type === 1"><img src="../assets/images/icon8.png"></i>
                    </div>
                    <div class="info-box">
                        <p class="tit">{{ item.title }}</p>
                        <p class="info ellips">
                            <span v-if="item.property_type">{{ item.property_type.name }}/</span>
                            <span v-if="item.area">{{ item.area }}㎡/</span>
                            <span v-if="item.park">{{ item.park.title }}/</span>
                            <span v-if="item.park">{{ item.park.city }}{{ item.park.city_first }}{{ item.park.city_second }}</span>
                        </p>
                        <p class="area ellips" v-if="item.type == 0 ">
			                <span v-if="item.rent == 0">
			                	<em class="price">面议</em>
			                </span>
                            <span v-if="item.rent !=0">
			                	<em class="price">{{ item.rent }}</em>
		                    	<small class="unit">元/㎡/月</small>
			                </span>
                        </p>
                        <p class="area ellips" v-if="item.type == 1 ">
                             <span v-if="item.price == 0">
                                <em class="price">面议</em>
                            </span>
                            <span v-if="item.price !=0">
                                <em class="price">{{ item.price }}</em>
                                <small class="unit">元/㎡</small>
                            </span>
                        </p>
                        <div class="tag-box"  v-if="item.tag[0] != ''">
                            <span class="tag" v-for="(tag,index) in item.tag"  v-if="index < 3">{{ tag }}</span>
                        </div>
                    </div>
                </router-link>
            </div>
        </div>

        
        <footer-view></footer-view>
        <alert :message='message' v-if="openMessage" @closeBtn="closeMessage"></alert>
    </div>
</template>

<script>
    import user from './../api/user'
    import alert from '../components/public/alert'

    export default {
        name: 'index',
        components:{alert},
        data() {
            return {
                search: false,
                selectFactory: false,
                selectTxt: '租厂房',
                keyword: true,
                selectTabs: ['租厂房', '买厂房'],
           
                searchKey: '',
                typeId: '0',
                remList: [],
                message:'请先登录',
                openMessage:false,
            };
        },
        computed:{
            selectedCity(){
                 return this.$store.state.city.city_title
             },
             selectedId(){
                 return this.$store.state.city.city_id
             } , 
        },
        created() {
        //    console.log(user.detail())
         //   this.selectedCity =  localStorage.getItem('title');
       //     this.selectedId = localStorage.getItem('id');
            this.getRemList();
           
        },
        methods: {
            getRemList() {
                this.$get('/api/workshop/2', {
                    city_id: this.selectedId,
                    is_recommend: 1
                }).then(res => {
                    console.log(res);
                    this.remList = res.data
                })
            },
            searchGet() {
                this.$router.push({name: 'houseList', params: {type: this.typeId}, query: {keyword: this.searchKey}});
            },
            searchOpen() {
                this.search = true;
            },
            searchClose() {
                this.search = false;
            },
            factoryBtn() {
                this.selectFactory = !this.selectFactory;
            },
            selectTabBtn(n, v) {
                this.selectTxt = n;
                this.selectFactory = false;
                this.typeId = v;
            },
            toUser(){
                if(localStorage.getItem('token')){
                    this.$router.push('/user')
                }else{
                    this.openMessage = true
                }
            },
             closeMessage(){
                this.openMessage = false
                this.$router.push('/login')           
        }
    }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    @import '../assets/css/index.css';

    .index-header {padding:30px 25px 50px;background:url(../assets/images/banner-bg2.jpg) 50% 50% no-repeat;background-size:cover;position: relative;}
    .index-header .user {position:absolute;top:5px;right:10px;z-index:10;width:30px;font-size:20px;color:#fff;overflow:hidden;text-align: center;line-height: 30px;}
    .index-header .slogan {display: block;max-width: 280px;height: auto;width: 100%;}
    .index-header .city {display: inline-block;margin-top: 100px;color: #fff;background: url(../assets/images/icon1.png) no-repeat 12px center rgba(0,0,0,0.5);background-size: 12px auto;padding: 4px 12px 4px 30px;border-radius: 20px;font-size: 16px;}

    .index-menu {padding: 0 15px 5px 0;background-color: #ce1927;}
    .index-menu ul {margin-top: -20px;position: relative;}
    .index-menu li {float: left;width: 33.333333%;}
    .index-menu li a {display: block;margin: 0 0 15px 15px;background-color: #fff;text-align: center;color: #333;font-size: 14px;padding: 15px 0;border-radius: 5px;box-shadow: 5px 5px 5px rgba(0,0,0,0.3);}
    .index-menu li img {display: block;margin: 0 auto;height: 41px;width: auto;}
    .index-menu li p {margin-top: 10px;}

    .index-panel {background-color: #fff;padding: 0 15px;margin: 12px 0;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;}
    .index-panel .hd {padding: 15px 0;border-bottom: 1px solid #f0f0f0;font-size: 0;}
    .index-panel .hd span {display: inline-block;line-height: 1;border-left: 3px solid #ce1927;padding-left: 10px;font-size: 16px;}
    .index-panel .hd i {float: right;width: 20px;height: 20px;position: relative;margin-top: -2px;}
    .index-panel .hd i:before {position: absolute;top: 4px;right: auto;bottom: auto;left: 1px;z-index: 10;display: block;content: "";width: 10px;height: 10px;border-width: 2px 2px 0 0;border-style: solid;border-color: #ccc;transform: rotate(45deg);}

    .index-remlist .items {display: flex;
        padding: 20px 0;
        border-bottom: 1px solid #f0f0f0;}
    .index-remlist .pic-box {position: relative;
        width: 120px;
        margin-right: 15px;
        overflow: hidden;}
    .index-remlist .pic-box img {display: block;width: 100%;height: auto;border-radius: 2px;}
    .index-remlist .pic-box i {position: absolute;left: 0;top: 0;width: 50px;}
    .index-remlist .pic-box i img {border-radius: 0;}
    .index-remlist .info-box {-webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 100px;
        overflow: hidden;}
    .index-remlist .info-box .tit {
        margin-bottom: 6px;
        font-size: 16px;
        color: #333;
        line-height: 1.5;
        font-weight: 500;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .index-remlist .info-box .info {
        margin-bottom: 5px;
        font-size: 12px;
        color: #666;
        line-height: 1.5;
    }
    .index-remlist .info-box .area {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        margin-bottom: 3px;
        font-size: 12px;
        color: #aaa;
        line-height: 1.2;
    }
    .index-remlist .info-box .price {
        font-size: 1.3em;
        font-weight: 700;
        color: #e62129;
    }

    .index-remlist .info-box .tag-box {
        font-size: 0;
    }
    .index-remlist .info-box .tag {
        display: inline-block;
        margin-right: 5px;
        margin-top: 5px;
        padding: 3px 5px;
        font-size: 12px;
        color: #999;
        line-height: 1.2;
        border: 1px solid #f0f0f0;
        border-radius: 2px;
    }
    .index-remlist .info-box .tag:first-child{color:#e6b322;background-color: rgba(230, 179, 34, 0.2);}
    .index-remlist .info-box .tag:nth-child(2){color:#68be8d;background-color: rgba(104, 190, 141, 0.2);}
    .index-remlist .info-box .tag:nth-child(3){color:#59b9c7;background-color: rgba(89, 185, 199, 0.2);}
    .index-remlist .info-box .tag:nth-child(4){color:#e62129;background-color: rgba(230, 33, 41, 0.2);}
</style>
